<template>
	<view class="productList" >
		<view class="product" v-for="(product,index) in productList " :key="index">
			<image class="pic" :src='product.imageUrl' mode='aspectFill'/>
			<p class="name" v-text="product.name"></p>
			<p class="price"> {{product.price}}</p>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productList:[
					{
						prodcutId:'888',
						name:'限量笔记本',
						price:'￥200',
						imageUrl:'../../static/pics/notbook.jpg'
					},	{
						prodcutId:'888',
						name:'限量笔记本',
						price:'￥200',
						imageUrl:'../../static/pics/notbook.jpg'
					},	{
						prodcutId:'888',
						name:'限量笔记本',
						price:'￥200',
						imageUrl:'../../static/pics/notbook.jpg'
					},	{
						prodcutId:'888',
						name:'限量笔记本',
						price:'￥200',
						imageUrl:'../../static/pics/notbook.jpg'
					},	{
						prodcutId:'888',
						name:'限量笔记本',
						price:'￥200',
						imageUrl:'../../static/pics/notbook.jpg'
					}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.productList{
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		flex-wrap: wrap;	
		margin:20upx 0 ;
		font-family: PingFangSC-Regula;		
		.product{
			width: 350upx;
			margin-left: 13upx;
			margin-right: 12upx;
			.pic{
				width: 350upx;
				height:350upx;
				border-radius: 20upx;
			}
			.name{
				font-size: 32upx;
				margin-top:8upx;
				marign-bottom:12upx;
				color:#0E1117
			}
			.price{
				font-size: 28upx;
				color:#919191;
			}
		}
	}

</style>
